<template>
  <div class="contents">
    <div class="btn-fixed" v-if="activeName == 'first'">
      <el-button @click="drawer = true">表头设置</el-button>
      <el-button type="primary" icon="el-icon-plus" @click="goAddEnter">
        新增
      </el-button>
    </div>
    <div class="btn-fixed" v-else>
      <el-button>导出</el-button>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="入库管理" name="first">
        <el-drawer title="选择表头显示列" :visible.sync="drawer" :modal="false" :show-close="false">
          <span>表头名称!</span>
        </el-drawer>
      </el-tab-pane>
      <el-tab-pane label="入库查询" name="second"></el-tab-pane>
    </el-tabs>
    <el-row :gutter="20">
      <el-col :span="3">
        <el-select v-model="rkglzt" placeholder="全部状态">
          <el-option label="全部状态" value=""></el-option>
          <el-option label="待确认" value="0"></el-option>
          <el-option label="待入库" value="1"></el-option>
          <el-option label="已入库" value="2"></el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select v-model="rkglkfxz" placeholder="默认库房">
          <el-option label="全部仓库" value=""></el-option>
          <el-option :label="item.name" v-for="(item,i) in rkglkf" :key="i" :value="item.id"></el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <!-- <el-select v-model="value" placeholder="全部类型">
          <el-option v-for="item in opt1" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select> -->
      </el-col>
      <el-col :span="3">
        <el-button style="margin-left: 15px;" type="text" @click="clickOpen">
          <span :style="{ visibility: openCol ? 'hidden' : 'visible' }">
            收起
          </span>
          高级筛选
          <vab-icon :icon="openCol ? 'arrow-down-s-line' : 'arrow-up-s-line'" />
        </el-button>
      </el-col>
    </el-row>
    <div v-show="!openCol" style="margin-top: 10px;">
      <el-row :gutter="10">
        <el-col :span="4" v-show="this.activeName == 'first'">
          <el-select v-model="rkglsjlxxz" placeholder="时间">
            <el-option label="入库时间" value="1"></el-option>
            <el-option label="制单时间" value="2"></el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-date-picker type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
            v-model="rkglsj" value-format="timestamp" style="width: 260px;"></el-date-picker>
        </el-col>
        <el-col :span="6">
          <el-input v-model="rkglrkdh" placeholder="输入入库单号">
            <el-button slot="append" @click="getList()" icon="el-icon-search" type="primary"></el-button>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model="rkglgldh" placeholder="关联单号">
            <el-button slot="append" @click="getList()"  icon="el-icon-search" type="primary"></el-button>
          </el-input>
        </el-col>
      </el-row>
    </div>

    <div v-if="this.activeName == 'first'">
      <el-table :data="table1.list"
        style="width: 100%; margin-top: 10px;">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="no" label="入库单号" width="120px"></el-table-column>
        <el-table-column prop="total" label="单据金额" width="120px"></el-table-column>
        <el-table-column prop="inputTime" label="入库时间" width="150px">
          <!-- formatDate -->
          <template slot-scope="scope">
            {{scope.row.inputTime | formatDate}}
          </template>
        </el-table-column>
        <el-table-column prop="wfname" label="仓库" width="120px"></el-table-column>
        <el-table-column prop="ppname" label="采购员/供应商" width="120px"></el-table-column>
        <el-table-column prop="type" label="类型" width="120px"></el-table-column>
        <el-table-column prop="relativeOrderNo" label="关联单号" width="120px">
          <template slot-scope="scope">
            <el-link @click="$router.push('/roomstore/enterManagerelevanceParticulars/'+scope.row.no)" :underline="false" type="primary">
            {{scope.row.relativeOrderNo}}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="cuser" label="制单人" width="120px"></el-table-column>
        <el-table-column prop="status" label="入库状态" width="120px">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 1">
              待入库
            </div>
            <div v-if="scope.row.status == 2">
              已入库
            </div>
            <div v-if="scope.row.status == 0">
              未确认
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="200px">
          <template slot-scope="scope">
            <div style="display: flex;z-index: 4;justify-content: flex-end;height: 100%;">
              <!-- {{isshow}}aaa{{scope.$index}} -->
                <div class="items" v-if="scope.row.status == 0">
                  <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info"
                     @confirm="affirmfunc(scope.row)"  icon-color="red" title="确定确认吗？">
                    <div slot="reference">确定</div>
                  </el-popconfirm>
                </div>
                <div class="items"  @click="detailfunc(scope.row)">详情</div>
                <div class="items" v-if="scope.row.status == 0"  @click="editfunc(scope.row)">编辑</div>
                <div class="items"  v-if="scope.row.status == 0" >
                  <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info"
                    @confirm="delfunc(scope.row)" icon-color="red" title="确定删除吗？">
                    <div slot="reference">删除</div>
                  </el-popconfirm>
                </div>
                <div  class="items">打印</div>
                <div class="items" style="width: 50px;">
                  导出
                </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="totalMount">
        <span>合计:</span>
        <span style="color: red;">{{ordertotal}}</span>
      </div>
      <el-pagination background layout="total, prev, pager, next,sizes, jumper" :page-size="pagesize"
        :page-sizes="[10, 15, 20, 50, 100]" @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
        style="text-align: left;" :total="table1.total" />
    </div>
    <div v-else>
      <el-table :data="table2.list" style="width: 100%; margin-top: 10px;">
        <el-table-column prop="giname" type="index" label="序号"></el-table-column>
        <el-table-column prop="giname" label="商品"></el-table-column>
        <el-table-column prop="detail" label="描述"></el-table-column>
        <el-table-column prop="unit" label="单位"></el-table-column>
        <el-table-column prop="wfname" label="仓库"></el-table-column>
        <el-table-column prop="type" label="入库类型"></el-table-column>
        <el-table-column prop="relativeOrderNo" label="关联单号"></el-table-column>
        <el-table-column label="入库时间">
          <template slot-scope="scope">
            {{scope.row.inputTime | formatDate}}
          </template>
        </el-table-column>
        <el-table-column prop="qty" label="入库数量"></el-table-column>
        <el-table-column prop="price" label="入库单价">
          <template slot-scope="scope">
            {{scope.row.price/100}}
          </template>
        </el-table-column>
        <el-table-column prop="total" label="入库金额"></el-table-column>
        <el-table-column prop="remarks" label="备注"></el-table-column>
      </el-table>
      <el-pagination background layout="total, prev, pager, next,sizes, jumper" :page-size="pagesizeitem"
        :page-sizes="[10, 15, 20, 50, 100]" style="text-align: left;" @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2" :total="table2.total" />
    </div>
  </div>
</template>

<script>
  import {
    WarehouseInputQuery,
    WarehouseInputQueryinfo,
    WarehouseInputitemdel,
    getWarehouseQuery,
    WarehouseInputaffirm
  } from '@/api/warehouse'
  export default {
    data() {
      return {
        activeName: 'first',
        tableIndex: 0,
        drawer: false,
        openCol: true,
        pagesize: 10, //当前显示数目
        current: 1, //当前页数
        pagesizeitem: 10, //当前显示数目
        currentitem: 1, //当前页数
        value: '',
        rkglkf:'', //入库管理库房
        rkglkfxz:'', //入库管理库房最终选择
        rkglzt:'',//入库管理状态
        rkglsjlxxz:"1",//入库管理时间类型选择
        rkglsj:'',//入库管理时间
        rkglrkdh:'',//入库管理入库单号,
        rkglgldh:'',//入库管理关联单号
        isshow: -1,
        table1: [],
        table2: [],
        opt1: [{
            value: '0',
            label: '全部类型',
          },
          {
            value: '1',
            label: '采购入库',
          },
          {
            value: '2',
            label: '其他入库',
          },
          {
            value: '3',
            label: '调货入库',
          },
          {
            value: '4',
            label: '订单退货',
          },
          {
            value: '5',
            label: '单位转换',
          },
          {
            value: '6',
            label: '期初入库',
          },
          {
            value: '7',
            label: '报溢入库',
          },
          {
            value: '8',
            label: '分割入库',
          },
        ],
      }
    },
    computed: {
      ordertotal() {
        let cont = 0
        console.log("aaa",this.table1.list);
        if(this.table1 != ""){
          for (let temp of this.table1.list) {
            cont += temp.total
          }
        }
        return cont
      }
    },
    async created() {
     let res = await getWarehouseQuery({})
     this.rkglkf = res.data.list
     console.log("仓库",res);
      this.getList()
    },
    filters:{
      formatDate(date) {
        var date = new Date(date*1000);
        var YY = date.getFullYear() + '-';
        var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        return YY + MM + DD +" "+hh + mm + ss;
      }
    },
    watch:{
      rkglzt(){
        this.getList()
      },
      rkglkfxz(){
        this.getList()
      },
      rkglsj(){
        this.getList()
      }
    }
    ,methods: {
      //入库管理
      async affirmfunc(val){
        console.log(val);
        let data = {
          id:val.id,
          status:1
        }
        let res = await WarehouseInputaffirm(data)
        if(res.status == 200){
          this.$message.success("确认成功")
        }else{
          this.$message.error("确认失败")
        }
        this.getList()
      }
      ,async getList() {
        let data={
          wis_id: 1,
          "current": this.current,
          "pagesize": this.pagesize
        }
        // 状态
        if(this.rkglzt != ""){
          data.status =  this.rkglzt*1
        }
        // 库房
        if(this.rkglkfxz != ""){
          data.warehouseId =  this.rkglkfxz
        }
        //时间
        console.log("this.rkglsj ",this.rkglsj);
        if(this.rkglsj != "" && this.rkglsj != null){
          if(this.rkglsjlxxz == 1){
            let inputCheckTime = {
              startTime:this.rkglsj[0]/1000,
              endTime:this.rkglsj[1]/1000,
            }
            data.inputCheckTime = inputCheckTime
          }else{
            let createCheckTime = {
              startTime:this.rkglsj[0]/1000,
              endTime:this.rkglsj[1]/1000,
            }
            data.createCheckTime = createCheckTime
          }
        }
        if(this.rkglrkdh != ""){
          data.no = this.rkglrkdh
        }
        if(this.rkglgldh != ""){
          data.relativeOrderNo = this.rkglgldh
        }
        console.log("加了一个状态",data);



        const res = await WarehouseInputQuery(data)
        this.table1 = res.data
        console.log(this.table1.list);
        console.log("表格中数据22222222222", this.table1);
      },
      // 详情
      detailfunc(val) {
        this.$router.push('/roomstore/enterManageParticulars/' + val.id)
      },
      // 编辑
      editfunc(val) {
        console.log("编辑", val);
        this.$router.push('/roomstore/enterManageedit/' + val.id)
      },
      async delfunc(val) {
        let data = {
          id: val.id
        }
        console.log(val);
        let res = await WarehouseInputitemdel(data)
        if (res.status == 200) {
          this.$message({
            message: "删除成功",
            type: "success"
          })
          this.getList()
        } else {
          this.$message({
            message: "删除失败",
            type: "error"
          })
        }
        console.log(res);
      },
      //入库查询
      async getItemList() {
        const res = await WarehouseInputQueryinfo({
          wis_id: 1,
          "current": this.currentitem,
          "pagesize": this.pagesizeitem
        })
        console.log("入库查询aa",res.data);
        this.table2 = res.data
      },
      goAddEnter() {
        this.$router.push('/roomstore/addEnteroOrder')
      },
      handleClick(tab) {
        if (tab.inex == 0) {
          this.current = 1
          this.pagesize = 10
          this.getList()
        } else {
          this.getItemList()
        }
      },
      clickOpen() {
        this.openCol = !this.openCol
      },
      handleSizeChange1(val) {
        this.pagesize = val

        this.getList()
      },
      handleCurrentChange1(val) {
        this.current = val
        this.getList()
      },
      handleSizeChange2(val) {
        this.pagesizeitem = val
        this.getItemList()
      },
      handleCurrentChange2(val) {
        this.currentitem = val
        this.getItemList()
      },
      enter(row, column, cell, event) {
        this.isshow = row.id
      },
      leave(row, column, cell) {
        this.isshow = -1
      },
    },
  }
</script>

<style lang="scss" scoped>
  .items{
    flex: 1;
    cursor: pointer;
    display: flex;align-items:center;
    line-height: 100%;
    height: 100%;
    justify-content: center;
    color: #1890ff;
  }
  .contents {
    padding: 0px 20px 10px;

    .totalMount {
      height: 30px;
      line-height: 30px;
      font-size: 24px;
      margin-top: 20px;
      // background: #e6e6e6;
      text-align: right;
      font-size: 15px;
      padding-right: 34px;
    }

    .btn-fixed {
      position: absolute;
      top: 24px;
      right: 40px;
      z-index: 12;
    }
  }
</style>
